<!-- 
	list 			传入的参数			工作列表Array

	isNavicatTo     是否可以跳转到详情页	默认为false
	isEdit 			是否显示编辑按钮		默认为false
	isDelete 		是否可以删除			默认为true
	@delItem 		删除功能				出参数为index索引
	@editItem 		编辑功能				出参数为index索引
	@copyItem		复制功能				出参数为index索引
 -->


<template>
	<view>
		<view :class="['out-box',{'out-box2':hasEmail}] " v-for="(item,index) in list" :key="index">
			<view :class="['flex-box','inner-box',lastCurrent==index?'inner-box-toright':'',current==index?'inner-box-toleft':'']"
			 :data-index=" index" @touchstart="touchStart" @touchend="touchEnd">
				<view class="content2" @click="navicatTo(item.id)">
					<view class="content">
						<view class="flex-box">
							<view class="font1">
								{{item.name}}
							</view>
							<view class="font2">
								{{item.recruitType=="实习"?item.minSalary+"~"+item.maxSalary:item.maxSalary}}
							</view>
						</view>
						<view class="flex-box line2">
							<view class="font3">
								{{item.company}}
							</view>
							<view class="font4">
								{{item.createTime}}
							</view>
						</view>
						<view class="flex-box">
							<view class="">
								<!-- <text class="font-span" v-for="(item2,index2) in item.spanList" :key="index2">{{item2}}</text> -->
								<text class="font-span">{{item.city}}</text>
								<text class="font-span">{{item.minEducation}}</text>
								<text class="font-span">{{item.qualification}}</text>
							</view>
							<view v-show="isEdit" class="" @click.stop="ediItem(index)">
								<image class="image-base" src="../static/personal/edit.png" mode=""></image>
							</view>
						</view>
						<view class="flex-box2" v-if="hasEmail">
							<view class="emil-box">
								投递邮箱：{{item.email}}
							</view>
							<view>
								<text class="copy-box" @click.stop="copy(index)">复制</text>
							</view>
						</view>
					</view>
				</view>
				<view v-if="isDelete" :class="['del-box',{'out-box2':hasEmail}]" @click.stop="delObj(index)">
					<image class="image-base" src="../static/personal/delete.png" mode=""></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			"list": {
				type: Array,
				default: []
			},
			"isEdit": {
				type: Boolean,
				default: false
			},
			"isNavicatTo": {
				type: Boolean,
				default: false
			},
			"hasEmail": {
				type: Boolean,
				default: false
			},
			"isDelete": {
				type: Boolean,
				default: true
			}
		},

		data() {
			return {
				startX: 0, //	横向滑动的距离
				lastCurrent: -1, //	上一个展开的item
				current: -1, //	本次展开的item
			}
		},

		methods: {
			// 跳转到详情页
			navicatTo(id) {
				if (this.isNavicatTo) {
					uni.navigateTo({
						url: "/pages/job/jobdetail?id=" + id
					})
				}
			},

			// 复制功能
			copy(index) {
				this.$emit("copyItem", index)
			},

			// 删除该条数据
			delObj(index) {
				uni.showModal({
					title: '提示',
					content: '确定删除该条数据？',
					success: res => {
						this.lastCurrent = -1
						this.current = -1
						if (res.confirm) {
							this.$emit("delItem", index)
						}
					}
				});
			},

			// 修改某条数据
			ediItem(index) {
				this.$emit("ediItem", index)
			},

			// 开始滑动
			touchStart(e) {
				this.startX = e.changedTouches[0].clientX
				this.startY = e.changedTouches[0].clientY
			},

			// 停止滑动
			touchEnd(e) {
				let endX = e.changedTouches[0].clientX
				let endY = e.changedTouches[0].clientY
				let dx = this.startX - endX
				let dy = Math.abs(this.startY - endY)

				if (dy <= 40 && this.isDelete) {
					if (dx >= 60 && e.currentTarget.dataset.index != this.current) {
						[this.lastCurrent, this.current] = [this.current, e.currentTarget.dataset.index]
					}
					if (dx <= -60 && e.currentTarget.dataset.index == this.current) {
						[this.lastCurrent, this.current] = [this.current, -1]
					}
				}
			}
		},
		watch: {
			list(val) {
				if (!val.length) {
					this.lastCurrent = -1 //	上一个展开的item
					this.current = -1 //	本次展开的item
				}
			}
		}
	}
</script>

<style scoped>
	.copy-box {
		padding: 8rpx 16rpx;
		font-size: 28rpx;
		color: #1B82FE;
		line-height: 28rpx;
		border-radius: 4rpx;
		border-radius: 4rpx;
		background-color: rgba(27, 130, 254, 0.1);
	}

	.image-base {
		width: 36rpx;
		height: 36rpx;
		display: block;
	}

	.flex-box {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.out-box {
		width: 100vw;
		position: relative;
		height: 194rpx;
	}

	.out-box2 {
		height: 262rpx !important;
	}

	.emil-box {
		font-size: 28rpx;
		color: rgba(4, 3, 25, 0.8);
		line-height: 28rpx;
		margin-right: 36rpx;
	}

	.flex-box2 {
		display: flex;
		align-items: center;
		margin-top: 32rpx;
	}

	.inner-box {
		width: calc(100vw + 160rpx);
		position: absolute;
	}

	.inner-box-toleft {
		animation: toLeft 0.3s forwards;
	}

	.inner-box-toright {
		animation: toRight 0.3s forwards;
	}

	.content {
		box-sizing: border-box;
		padding-bottom: 31rpx;
		width: 100%;
		border-bottom: 1rpx solid rgba(4, 3, 25, 0.1);
	}

	.content2 {
		padding: 32rpx 30rpx 0 30rpx;
		box-sizing: border-box;
		width: 100vw;
	}

	.line2 {
		margin: 16rpx 0;
	}

	.del-box {
		width: 160rpx;
		height: 194rpx;
		background: #FF5756;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: red;
	}

	@keyframes toLeft {
		from {
			left: 0;
		}

		to {
			left: -160rpx;
		}
	}

	@keyframes toRight {
		from {
			left: -160rpx;
		}

		to {
			left: 0;
		}
	}

	.font1 {
		font-size: 32rpx;
		color: #040319;
		line-height: 32rpx;
		font-weight: bold;
	}

	.font2 {
		font-size: 32rpx;
		color: #1B82FE;
		line-height: 32rpx;
		font-weight: bold;
	}

	.font3 {
		font-size: 28rpx;
		color: rgba(4, 3, 25, 0.6);
		line-height: 28rpx;
	}

	.font4 {
		font-size: 24rpx;
		color: rgba(4, 3, 25, 0.4);
		line-height: 24rpx;
	}

	.font-span {
		margin-right: 28rpx;
		font-size: 22rpx;
		color: rgba(4, 3, 25, 0.4);
		line-height: 22rpx;
		background: rgba(4, 3, 25, 0.04);
		border-radius: 4rpx;
		padding: 8rpx 12rpx;
		display: inline-block;
	}

	.font-span:last-child {
		margin: 0;
	}
</style>
